<template>
    <mian-layout>
        <el-descriptions labelClassName="mysdItemLable" title="原创卡片详情" :column="2" border>
            <el-descriptions-item label="卡片名称">{{oDetail.cardName}}</el-descriptions-item>
            <el-descriptions-item label="创作者名称">{{oDetail.authorName}}</el-descriptions-item>
            <el-descriptions-item label="卡片描述">{{oDetail.cardDesc}}</el-descriptions-item>
            <el-descriptions-item label="创作者简介">{{oDetail.authorProfile}}</el-descriptions-item>
            <el-descriptions-item label="卡片头图">
                <div class="imgItemBox">
                    <img :src="oDetail.cardImg">
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="创作者头像">
                <div class="authorHeadImg">
                    <img :src="oDetail.authorHeadImg">
                </div>
            </el-descriptions-item><el-descriptions-item label="广告位价值分析" :span="2">{{oDetail.valueAnalysis}}</el-descriptions-item>
            
        </el-descriptions>
        <br/>

        <div style="text-align: center;">
            <my-back type="info" :reGetDataFlag="true">返回</my-back>
            <el-button type="success" plain icon="el-icon-edit" @click="goDetail">修改</el-button>
        </div>
    </mian-layout>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myBack from '@/components/public/myBack.vue'
import {
  get_card_detail
} from '@/api/collext'
export default {
    components:{
      myTable,
      myBack
    },
    data(){
        return{
            id:'',
            oDetail:{},
            sceneNames:[]
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.id = this.$route.params.id
        this.getData()
    },
    methods:{
        async getData(){ 
            const res = await get_card_detail(this.id)
            this.oDetail = res.data
        },
        goDetail(){
            sessionStorage.setItem('details',JSON.stringify(this.oDetail))
            this.$router.push(`/card/add?id=${this.oDetail.cardId}`)
        }
    }
}
</script>
<style lang="scss" scoped>
    .imgItemBox{
        display: flex;
        img{
            display: block;
            height: 100px;
            margin: 0 10px 0 0;
        }
    }
    .imgList{
        display: flex;
        padding: 0 0 10px 0;
        img{
            display: block;
            height: 70px;
        }
        p{
            display: flex;
            align-items: center; 
            padding: 0 0 0 20px;
        }
    }
</style>
<style lang="scss">
    .mysdItemLable{
        width: 150px;
    }
</style>